/**
  * @Description: 单月巡视巡检工单列表
  * @author zhangxia
  */

<template>
    <view class="task-monitor-main">
    	<nav-bar class="header" back title="单月巡视巡检工单列表" @goBack="goBack"></nav-bar>
    	<view class="main-container">
    		<view class="datetitle">{{dateTitle}}</view>
    		<view class="task-list-container" v-if="taskList.length > 0">

    			<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    				<van-list v-model="isLoading" :finished="finished" finished-text="没有更多了" @load="loadMore">
    					<!-- 列表循环   -->

    					<view class="task-list" v-for="(item,index) in taskList" :key="index" @click="jump(item)">
    						<view class="task-title">
    							<view class="task-title-main">
    								<text class="timetype">{{item.INSPECTION_DAY?item.INSPECTION_DAY.split('-').slice(1,3).join('-'):'--'}}</text>
    								<text class="task-title-main-text">{{ item.NAME }}</text>
    							</view>
    							<text class="task-status">
    								<text :class="{'toBeExecutedActive':item.APPROVE_STATE=='0'}">{{item.APPROVE_STATE == '0' ?'待执行':item.APPROVE_STATE === '1' ?'待审批':'已完成'}}</text>
    							</text>
    						</view>
    						<hr class="task-hr">
    						<view class="top-task-main">
    							<text class="task-big-ltitle">网管执行人员:</text>
    							<text class="task-small-ltitle">{{ item.EXECUTIVE_NAME }}</text>
    						</view>
							<view class="top-task-main">
								<text class="task-big-ltitle">运维专责:</text>
								<text class="task-small-ltitle">{{ item.EXPERT_NAME }}</text>
							</view>

    					</view>
    				</van-list>
    			</van-pull-refresh>
    		</view>
    	</view>
    	<!--弹出搜索页-->
    	<van-popup v-model="showSearch" position="right">
    		<search-equ-match @cancel="showSearch = false;" @search="onSearch" />
    	</van-popup>
    </view>
</template>

<script>
import navBar from "../../../components/common/nav-bar";
import searchEquMatch from '../../common/searchEquMatch'
import screenPopup from "../common/screenPopup.vue";
import plateTitle from "../common/plateTitle.vue";
import {mapGetters} from "vuex";
import moment from 'moment'
import { Dialog, Toast } from 'vant'
export default {
    name: 'singleMonthPatrolList',
    components: {
    	navBar,
    	searchEquMatch,
    	screenPopup,
    	plateTitle
    },
    props: {},
    data() {
        return {
			dateTitle:"2023-01-10",
        	searchValue: "",
        	showSearch: false,
        	beginTime: '',
        	endTime: '',

        	timeString: '',
        	currentDate: '',
        	minDate: new Date(0),
        	showPicker: false,
        	taskList: [{
        		NAME: '通信网管巡视巡检工单',
        		TASK_TIME: '03-01',
        		PERSON:["丽丽","张三"],
				isFinished:true
        	}],
        	color: (TASK_STATE) => {
        		if (TASK_STATE === "1") return "blue";
        		if (TASK_STATE === "2") return "red";
        		if (TASK_STATE === "3") return "yellow";
        		if (TASK_STATE === "99") return "green";
        	},
        	refreshing: false, // 是否正在刷新
        	isLoading: false,
        	finished: false,
        	total: 0, // 总条数
        	page: 1,
        	limit: 20,
        	current: 0,
        	typeList: [{
        			title: '发起时间：',
        			type: 'beginTime',
        			optionList: [{
        					TITLE: '本周',
        					VALUE: 0,
        					isActive: true,
        				},
        				{
        					TITLE: '本月',
        					VALUE: 1,
        					isActive: false,
        				},
        				{
        					TITLE: '上月',
        					VALUE: 2,
        					isActive: false,
        				}
        			]
        		},
        		{
        			title: '其他时间：',
        			type: 'otherTime',
        			optionList: [{
        					TITLE: '按天',
        					VALUE: 0,
        					isActive: false,
        				},
        				{
        					TITLE: '按月',
        					VALUE: 1,
        					isActive: false,
        				},
        			]
        		}
        	],
        	menuList: [

        	],
        };
    },
	onLoad(option) {
		  
		this.dateTitle = option.time
		this.getSingleMonthPatrolList(option.time)
	},
    created() {},
    mounted() {
        
    },
    computed: {
      ...mapGetters(['userData'])
    },
    watch: {},
    methods: {
    	 getSingleMonthPatrolList(time){
			 let params = JSON.stringify({
				date: time,
				userId: this.userData.USERID
			 })
			 this.$api.getSingleMonthPatrolList(params).then(res => {
				this.isLoading = false;
				this.refreshing = false;
				this.taskList = res.data;
			 })
		 },
    	goBack() {
    		uni.navigateTo({
    			url: '/pages/operationApprove/communicationNetWorkPerson/communicationNetWorkPerson'
    		})
    	},
    	add() {

    	},
    	onSearch(searchValue) {
    		this.searchValue = searchValue;
    		this.onRefresh();
    		this.showSearch = false;
    	},
		onRefresh(){
			this.refreshing = true;
			this.finished = false;
			this.page = 1;
			this.taskList = [];
			this.getSingleMonthPatrolList(this.dateTitle);
		},
    	loadMore() {
    		if (this.total > this.taskList.length) {
    			this.page = this.page + 1;

    		} else {
    			this.finished = true;
    		}
    	},
    	//  列表跳转
    	jump(item) {
			uni.navigateTo({
				url:`/pages/operationApprove/communicationNetWorkPerson/networkTeamIncomplete?date=${item.INSPECTION_DAY}&status=${item.APPROVE_STATE}`
			})
    	}
    }
}
</script>

<style lang="scss" scoped>
.task-monitor-main {
	height: 100vh;
	background: #F2F6FA;
	display: flex;
	flex-direction: column;
	.header {
		position: sticky;
		top: 0;
    .imgLeft {
			width: px2vw(48);
			margin-right: px2vw(40);
		}
		.header-right {
			display: flex;
			/deep/ .van-icon {
				font-size: px2vw(52);
				font-weight: bold;
			}
			/deep/ .van-icon-scan {
				margin-right: px2vw(12);
			}
			/deep/ .van-icon-filter-o {
				margin-left: px2vw(12);
			}
		}
		.currentyear{
			font-size: px2vh(16);
		}
	}
	.header-bar {
		height: px2vh(120);
		border-radius: 0 0 px2vh(40) px2vh(40);
		background: #417ADC;
		margin-bottom: px2vh(130);
		.menu {
			width: px2vw(1020);
			height: px2vh(220);
			background-image: url('../../../static/img/borderR.png');
			background-size: px2vw(1020) px2vh(220);
			margin: 0 auto;
			display: flex;
			justify-content: space-evenly;
			li {
				height: 100%;
				position: relative;
				.right-box {
					height: px2vh(112);
					float: left;
					margin-top: px2vh(59);
					text-align: center;
					.menu-num {
						display: block;
						font-size: px2vw(54);
						font-weight: bold;
						color: #333;
					}

					.menu-state {
						font-size: px2vw(36);
						color: #333;
					}

					.selectmenu {
						color: #417ADC;
					}
				}

				.sj {
					width: px2vw(78);
					height: px2vh(66);
					position: absolute;
					bottom: px2vh(-34);
					//right: px2vw(40);
					left: 50%;
					transform: translateX(-50%);
					background-image: url('../../../static/img/sj.png');
					background-size: px2vw(78) px2vh(66);
				}
			}
		}
	}
	.task-info-container,
	.task-assignment-item {
		border-radius: $border-radius-base;
		overflow: hidden;
		background-color: #ffffff;
	}
	.main-container {
		// height: calc(100vh - #{px2vh(120)});
		flex: 1;
		overflow-y: scroll;
		.datetitle{
			margin: px2vw(28) px2vh(30);
		}
		.task-list-container {
			height: calc(100vh - #{px2vh(120)} - 38px);
			overflow: auto;

			.task-list {
				width: px2vw(1020);
				background: #fff;
				border-radius: px2vw(20) px2vh(20);
				padding-bottom: px2vh(30);
				margin: 0 px2vw(30) px2vh(30) px2vw(30);
				.task-title {
					width: px2vw(940);
					height: px2vh(80);
					margin-left: px2vw(40);
					padding-top: px2vw(30);
					margin-bottom: px2vh(30);
					display: flex;
					align-items: center;
					justify-content: space-between;
					.task-title-main {
						display: flex;
						height: px2vw(50);
						align-items: center;
						.timetype{
							width: px2vw(200);
							height: px2vh(50);
							line-height: px2vh(50);
							border-radius: px2vw(10);
							font-size: px2vw(38);
							text-align: center;
							background-color: rgba(65,122,220,.1);
							color: #417ADC;
							// padding-top:px2vw(9) ;
							box-sizing: border-box;
						}
					}
					.task-title-main-text {
						width: px2vw(600);
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-left: px2vw(20);
						font-size: px2vh(48);
					}
					.task-status {
						width: px2vw(160);
						height: px2vh(50);
						line-height: px2vh(50);
						border-radius: px2vw(10);
						font-size: px2vw(40);
						text-align: center;
						color: #666666;
						color: #FF7070;
						background: rgba(255, 112, 112, .1);
						.toBeExecutedActive{
							color: #3CDA68;
							background: rgba(60,218,104,.1);
						}
					}
					.task-status.blue {
						color: #417ADC;
						background: #E4ECFA;
					}
					.task-status.red {
						color: #FF7070;
						background: rgba(255, 112, 112, 0.1);
					}
					.task-status.yellow {
						color: #FFAD0E;
						background: rgba(255, 180, 0, 0.1);
					}
					.task-status.green {
						color: #3CDA68;
						background: rgba(62, 218, 104, 0.1);
					}
				}
				.task-hr {
					width: px2vw(940);
					border: px2vh(1) solid #e5e5e5;
					margin-left: px2vw(40);
					margin-bottom: px2vh(42);
				}
				.top-task-main {
					width: px2vw(900);
					font-size: px2vh(36);
					line-height: px2vh(62);
					margin-left: px2vw(60);
					.task-big-ltitle,
					.task-big-rtitle {
						color: #666;
					}
					.task-small-ltitle,
					.task-small-rtitle {
						margin-left: px2vw(25);
						color: #333;
					}
					.task-big-rtitle {
						margin-left: px2vw(245);
					}
				}

			}
		}
	}
}
</style>
